<template>
    <div style="display:flex; flex-direction:column;width: 88%;margin-left:auto;margin-right: auto;">
        <!-- 查找框 -->
        <el-row class="row-bg" justify="start" style="margin:20px auto;">
            <el-col :span="24">
                <div class="find-container">
                    <el-text>查找</el-text>
                    <div class="grid-content">
                        <el-input v-model="searchText" size="large" class="inline-input w-50" placeholder="请输入角色名称">
                            <template #append>
                                <el-button style="margin: 0 0;" :icon="Search"
                                    @click="voiceActorSearch">声音搜索</el-button>
                            </template>
                        </el-input>
                    </div>
                </div>
            </el-col>
        </el-row>
        <!-- 分类过滤选项 -->
        <el-row class="row-bg" justify="start">
            <el-col :span="24">
                <div class="category-container">
                    <!-- 领域分类 -->
                    <el-row>
                        <el-col :span="24">
                            <CategorySearch class="category-search" :category="lingYuCategory" :items="lingYuItems"
                                @category-selected="catCategorySelect" />
                        </el-col>
                    </el-row>
                    <!-- tag分类 -->
                    <el-row>
                        <el-col :span="24">
                            <CategorySearch class="category-search" :category="tagCategory" :items="tagItems"
                                @category-selected="tagCategorySelect" />
                        </el-col>
                    </el-row>
                    <!-- 情感分类 -->
                    <el-row>
                        <el-col :span="24">
                            <CategorySearch class="category-search" :category="styleCategory" :items="styleItems"
                                @category-selected="styleCategorySelect" />
                        </el-col>
                    </el-row>
                    <!-- 角色分类 -->
                    <el-row>
                        <el-col :span="24">
                            <CategorySearch class="category-search" :category="roleCategory" :items="roleItems"
                                @category-selected="roleCategorySelect" />
                        </el-col>
                    </el-row>
                    <!-- 性别分类 -->
                    <el-row>
                        <el-col :span="24">
                            <CategorySearch class="category-search" :category="genderCategory" :items="genderItems"
                                @category-selected="genderCategorySelect" />
                        </el-col>
                    </el-row>
                </div>
            </el-col>
        </el-row>
        <!-- 显示查找出来的行数 -->
        <el-row class="row-bg" justify="start">
            <el-col :span="24">
                <div class="category-container">
                    <div class="text-container">
                        <el-text>共找到 {{ rowCount }} 个结果</el-text>
                    </div>
                </div>
            </el-col>
        </el-row>
        <!-- 显示查找出来看配音角色列表 -->
        <el-row class="row-bg" justify="start">
            <el-col :span="24">
                <el-space wrap>
                    <div v-for="(item, index) in numbers" :key="index" class="item-container">
                        <el-card class="role-container" @click="openDialog(item)" @mouseenter="enter(item, $event)"
                            @mouseleave="leave(item, $event)">
                            <div class="image-content">
                                <el-image class="image-left" :src="leftImageUrl" fit="fill" />
                                <el-image class="image-right" :src="rightImageUrl" fit="fill" />
                            </div>
                            <!-- 中间头像 -->
                            <div class="avatar-container">
                                <el-avatar :size="120" :src="baseUrl + item.Avatarimage" />
                            </div>
                            <!-- 名字 -->
                            <div class="name-container">
                                <el-text class="mx-2" size="large" tag="b"> {{ item.DisplayName }} </el-text>
                                <!-- 用TA配音 -->
                                <el-button style="height: 10px;width: 80px;" @click.stop="useTa(item)">用TA配音</el-button>
                            </div>
                            <!-- 情感系列名称 -->
                            <div class="tag-container">
                                <el-space wrap>
                                    <div v-for="(cat, index) in item.api_cat_id_names" :key="index">
                                        <el-tag text> {{ cat }}</el-tag>
                                    </div>
                                </el-space>
                            </div>
                        </el-card>
                    </div>
                </el-space>
            </el-col>
        </el-row>
    </div>

    <!-- 购卖框，点击角色弹出购卖框 -->
    <el-dialog v-model="dialogVisible" title="" width="60%" class="dark_bgcolor2">
        <div class="outer-container ">
            <!-- 语音播放 -->
            <audio ref="audioPlayer" :src="audioSrc" controls class="hidden-audio"></audio>
            <!-- 第一行 -->
            <div class="row-1">
                <el-row justify="start">
                    <el-col :span="3">
                        <div class="col-1">
                            <el-avatar :size="100" :src="baseUrl + currentItem.Avatarimage" />
                        </div>
                    </el-col>
                    <el-col :span="18">
                        <div class="col-2">
                            <div class="displayname">
                                <el-text class="mx-1" size="large" tag="b">{{ currentItem.DisplayName }}</el-text>
                            </div>
                            <div class="tags">
                                <div v-for="(cat, index) in currentItem.api_cat_id_names" :key="index">
                                    <el-tag size="small" text> {{ cat }}</el-tag>
                                </div>
                            </div>
                        </div>
                    </el-col>
                    <el-col :span="3">
                        <div class="col-3">
                            <el-button type="primary" style="float: right;"
                                @click="useTa(currentItem)">用TA配音</el-button>
                        </div>
                    </el-col>
                </el-row>
            </div>

            <!-- 第二行 -->
            <div class="row-2">
                <el-row justify="start">
                    <el-col :span="24">
                        <div style="display: flex; justify-items: flex-start; margin-right: auto;">
                            <el-button @click="handleVoiceStyleClick" style="text-align: left; width: 80px;"
                                v-for="tag in currentItem.api_style_id_names" :key="tag" icon="el-icon-menu">{{ tag }}
                            </el-button>
                        </div>
                    </el-col>
                </el-row>
            </div>

            <!-- 第三行 -->
            <div class="row-3">
                <el-input type="textarea" :rows="4" placeholder="请输入内容" v-model="text"></el-input>
            </div>

            <!-- 第四行 -->
            <div class="row-4">
                <el-row justify="start">
                    <el-col :span="1">
                        <el-icon><info-filled /></el-icon>
                    </el-col>
                    <el-col :span="20">
                        <el-text class="mx-1" :rows="2" style="flex: 1;text-align: left;">{{ noticeText }}</el-text>
                    </el-col>
                    <el-col :span="3">
                        <el-button type="primary" style="float: right" @click="buyTa(currentItem)">我要购买</el-button>
                    </el-col>
                </el-row>
            </div>
        </div>
    </el-dialog>

    <!-- 显示详细的角色 -->
    <div ref="showCardRef" v-show="currentItem.isShown" @mouseenter="enterCurrentItem(currentItem, $event)"
        @mouseleave="leaveCurrentItem(currentItem, $event)">
        <el-card id="card" class="role-container2" @click="openDialog(currentItem)">
            <div class="image-content">
                <el-image class="image-left" :src="leftImageUrl" fit="fill" />
                <el-image class="image-right" :src="rightImageUrl" fit="fill" />
            </div>
            <!-- 中间头像 -->
            <div class="avatar-container2">
                <el-avatar :size="120" :src="baseUrl + currentItem.Avatarimage" />
            </div>
            <!-- 名字 -->
            <div class="name-container">
                <el-text class="mx-2" size="large" tag="b"> {{ currentItem.DisplayName }} </el-text>
                <!-- 用TA配音 -->
                <el-button style="height: 10px;width: 80px;" @click.stop="useTa(currentItem)">用TA配音</el-button>
            </div>
            <!-- 情感系列名称 -->
            <div class="tag-container">
                <el-space wrap>
                    <div v-for="(cat, index) in currentItem.api_cat_id_names" :key="index">
                        <el-tag text> {{ cat }}</el-tag>
                    </div>
                </el-space>
            </div>
        </el-card>
    </div>
</template>

<script lang="ts">
export default {
    name: 'SoundSquare'
}
</script>

<script setup lang="ts">
// 导入 Vue 的响应式编程库和生命周期钩子
import { ref, onMounted, defineEmits } from 'vue';
// 导入 Axios，用于发送 HTTP 请求
import axios from 'axios';
// 导入 Element Plus 组件库，用于UI展示
import { ElText, ElRow, ElCol, ElAvatar, ElTag, ElSpace } from 'element-plus';
// 导入搜索图标组件
import {
    Search,
} from '@element-plus/icons-vue'
// 导入自定义的分类搜索组件
import CategorySearch from './CategorySearch.vue';
// 导入信息填充图标组件
import { InfoFilled } from '@element-plus/icons-vue';
// 导入 Element Plus 的消息提示和确认对话框模块
import { ElMessage, ElMessageBox } from 'element-plus'
// 导入类型定义，确保类型安全
import type { Action } from 'element-plus'
// 导入数据类型定义，用于定义接口和类型别名
import { RestaurantItem, IVoiceActor, VoiceActor, IVoiceTag, IVoiceCat, IVoiceStyle, Speech, VoiceStyle, VoiceRoleArgs, IVoiceRole, VoiceRole, ISpeech, GetBaseURL } from '../../../composables/types';
// 导入 Vue Router 的钩子，用于导航和获取路由信息
import { useRouter, useRoute } from 'vue-router';
// 导入音频处理相关的自定义钩子和工具函数
import { useAudio, TextSegment, getAudioDuration, formatDuration, textToSpeech, textToSpeechBlob } from '../js/Dubbingproduction/Audiomerging';

// 接口地址
const baseUrl: string = GetBaseURL();

// 路由相关
const router = useRouter();
const route = useRoute();

// 显示对话框
const dialogVisible = ref(false)

// 查找框文本
const searchText = ref('');

// 共查询到的记录数
const rowCount = ref(0);

// 配音角色大卡片显示
const showCardRef = ref(null);

// 领域分类
const lingYuCategory = ref('领域')

// 领域列表
const lingYuItems = ref(['']);

// 情感分类
const styleCategory = ref('情感');

// 角色分类
const roleCategory = ref('年龄');

// 角色列表
const roleItems = ref(['']);

// 情感列表
const styleItems = ref([""]);

// Tag分类
const tagCategory = ref('类别');

// Tag列表
const tagItems = ref(['']);

// 性别分类
const genderCategory = ref('性别')

// 性别列表
const genderItems = ref(['男', '女']);

// 角色上部的图片1
const leftImageUrl = ref(
    'src/images/pronunciation/svip.png'
);

// 角色上部的图片2
const rightImageUrl = ref(
    'src/images/pronunciation/qinggan.png'
);

//对话框数据


// 数据
const text = ref('中国有句古话，叫做识时务者为俊杰。没想到眼下的各种餐具，都堵不住阁下的嘴。你我都是聪明人，再不闭嘴好好吃饭的话，难免会遭受一些皮肉之苦。');
const noticeText = ref('您尚未拥有「角色」声音，该声音为SVIP可用，请先成为超级会员哦~');
const tags = ['标签1', '标签2', '标签3', '标签4', '标签5', '标签6'];


// 控制 SoundSquare 的数量
const soundSquares = ref(5);

// 定义一个角色角色列表
let voiceRoleList: VoiceRole[] = [];

//定义一个角色类别列表
let voiceCatList: IVoiceCat[] = [];

// 定义一个情绪列表
let voiceStyleList: VoiceStyle[] = [];

// 定义一个Tag列表
let voiceTagList: IVoiceTag[] = [];

// 定义一个角色DataItem数组
let dataItems: VoiceActor[] = [];

//发音员列表
const numbers = ref(dataItems);

// 当前选中的项
const currentItem = ref(new VoiceActor(0, '', '', ''));

// 音频播放器
const audioPlayer = ref<HTMLAudioElement | null>(null);
// 音频地址
const audioSrc = ref('');

// 响应分类按钮的选中事件
function categorySelect(item: string) {
    ElMessageBox.alert('响应分类按钮的选中事件' + item, '提示', {
        confirmButtonText: 'OK',
        callback: (action: Action) => {
            ElMessage({
                type: 'info',
                message: `action: ${action}`,
            })
        },
    })
}

// 性别分类按钮的选中事件
function genderCategorySelect(item: string) {
    loadVoiceListForGender(item);
}

// 领域分类按钮的选中事件
function catCategorySelect(item: string) {
    loadVoiceListForCat(item);
}

// 角色分类按钮的选中事件
function roleCategorySelect(item: string) {
    loadVoiceListForRole(item);
}

// 情感分类按钮的选中事件
function styleCategorySelect(item: string) {
    loadVoiceListForStyle(item);
}

// Tag分类按钮的选中事件
function tagCategorySelect(item: string) {
    loadVoiceListForTag(item);
}

// 加载语音角色列表(自已调制版)
function loadVoiceList(): void {
    axios.get(baseUrl + '/api/tts/tts/getVoice', {
        headers: {
            'Content-Type': 'application/json',
        }
    })
        .then(response => {
            // 处理响应数据
            const dataItems = response.data as VoiceActor[];

            // 确保每个 VoiceActor 对象都有 api_cat_id_names 数组和api_style_id_names 数组
            dataItems.forEach(item => {
                if (!item.api_cat_id_names) {
                    item.api_cat_id_names = [];
                }
                if (!item.api_style_id_names) {
                    item.api_style_id_names = [];
                }
            });

            // 处理语音分类列表，将 id 取到 name
            dataItems.forEach(item => {
                // 遍历 api_cat_ids
                const tempList = item.api_cat_ids.split(',');
                tempList.forEach(id => {
                    const catItem = voiceCatList.find(x => x.id.toString() == id);
                    if (catItem) {
                        item.api_cat_id_names.push(catItem.name);
                    }
                });
                // 遍历 api_style_ids
                const tempStyleList = item.api_style_ids.split(',');
                tempStyleList.forEach(id => {
                    const catItem = voiceStyleList.find(x => x.id.toString() == id);
                    if (catItem) {
                        item.api_style_id_names.push(catItem.name);
                    }
                });
            });

            // 找到的角色列表
            numbers.value = dataItems;
            // 找到的数据条数
            rowCount.value = numbers.value.length;
        })
        .catch(error => {
            // 处理错误
            console.error(error);
        });
}

// 根据性别加载配音角色列表
/**
 * 根据性别加载配音演员列表
 * @param gender 性别，"男"或"女"
 */
function loadVoiceListForGender(gender: string): void {
    let tempList: VoiceActor[] = [];
    const dataItems: VoiceActor[] = [];

    // 请求配音演员数据
    axios.get(baseUrl + '/api/tts/tts/getVoice', {
        headers: {
            'Content-Type': 'application/json',
        }
    }).then(response => {
        // 处理响应数据
        tempList = response.data as VoiceActor[];

        // 将中文性别转换为英文
        if (gender == "男") {
            gender = "male";
        }
        else {
            gender = "female";
        }

        // 筛选与指定性别匹配的配音演员
        tempList.forEach(item => {
            if (item.Gender == gender) {
                dataItems.push(item);
            }
        });

        // 确保每个 VoiceActor 对象都有 api_cat_id_names 数组和api_style_id_names 数组
        dataItems.forEach(item => {
            if (!item.api_cat_id_names) {
                item.api_cat_id_names = [];
            }
            if (!item.api_style_id_names) {
                item.api_style_id_names = [];
            }
        });

        // 处理语音分类列表，将 id 取到 name
        dataItems.forEach(item => {
            // 遍历 api_cat_ids
            const tempList = item.api_cat_ids.split(',');
            tempList.forEach(id => {
                const catItem = voiceCatList.find(x => x.id.toString() == id);
                if (catItem) {
                    item.api_cat_id_names.push(catItem.name);
                }
            });
            // 遍历 api_style_ids
            const tempStyleList = item.api_style_ids.split(',');
            tempStyleList.forEach(id => {
                const catItem = voiceStyleList.find(x => x.id.toString() == id);
                if (catItem) {
                    item.api_style_id_names.push(catItem.name);
                }
            });
        });

        // 找到的角色列表
        numbers.value = dataItems;
        // 找到的数据条数
        rowCount.value = numbers.value.length;
    })
        .catch(error => {
            // 处理错误
            console.error(error);
        });
}

// 根据领域加载配音角色列表
/**
 * 根据类别加载语音列表
 * @param api_cat_id 类别ID，用于筛选语音角色如果为空或未定义，则加载所有角色
 */
function loadVoiceListForCat(api_cat_id: string): void {
    // 请求语音角色列表
    axios.get(baseUrl + '/api/tts/tts/getVoice', {
        headers: {
            'Content-Type': 'application/json',
        }
    })
        .then(response => {
            // 处理响应数据
            const data = response.data as VoiceActor[];
            dataItems = [];
            let tempList: string[] = [];

            // 判断类别ID是否为空或未定义
            if (api_cat_id == "" || api_cat_id == undefined) {
                //是空，加载全部角色
                for (let i = 0; i < data.length; i++) {
                    dataItems.push(data[i]);
                }
            }
            else {
                //根据选择中的数据码加载角色
                let catItem: IVoiceCat | undefined = undefined;
                catItem = voiceCatList.find(x => x.name == api_cat_id);

                // 检查是否找到了对应的类别
                if (catItem != undefined) {
                    api_cat_id = catItem.id.toString();
                    for (let i = 0; i < data.length; i++) {
                        if (catItem != undefined) {
                            tempList = data[i].api_cat_ids.split(",");
                            if (tempList.includes(api_cat_id)) {
                                dataItems.push(data[i]);
                            }
                        }
                    }
                }
            }

            // 确保每个 VoiceActor 对象都有 api_cat_id_names 数组和api_style_id_names 数组
            dataItems.forEach(item => {
                if (!item.api_cat_id_names) {
                    item.api_cat_id_names = [];
                }
                if (!item.api_style_id_names) {
                    item.api_style_id_names = [];
                }
            });

            // 处理语音分类列表，将 id 取到 name
            dataItems.forEach(item => {
                // 遍历 api_cat_ids
                const tempList = item.api_cat_ids.split(',');
                tempList.forEach(id => {
                    const catItem = voiceCatList.find(x => x.id.toString() == id);
                    if (catItem) {
                        item.api_cat_id_names.push(catItem.name);
                    }
                });
                // 遍历 api_style_ids
                const tempStyleList = item.api_style_ids.split(',');
                tempStyleList.forEach(id => {
                    const catItem = voiceStyleList.find(x => x.id.toString() == id);
                    if (catItem) {
                        item.api_style_id_names.push(catItem.name);
                    }
                });
            });

            // 找到的角色列表
            numbers.value = dataItems;
            // 找到的数据条数
            rowCount.value = numbers.value.length;
        })
        .catch(error => {
            // 处理错误
            console.log(error)
        });
}
// 根据角色加载配音角色列表
/**
 * 根据角色 ID 加载语音列表
 * @param api_role_id 角色 ID，如果为空或未定义，则加载全部角色
 */
function loadVoiceListForRole(api_role_id: string): void {
    // 发起 HTTP GET 请求获取语音数据
    axios.get(baseUrl + '/api/tts/tts/getVoice', {
        headers: {
            'Content-Type': 'application/json',
        }
    })
        .then(response => {
            // 处理响应数据
            const data = response.data as VoiceActor[];
            dataItems = [];
            let tempList: string[] = [];

            // 检查角色 ID 是否为空或未定义
            if (api_role_id == "" || api_role_id == undefined) {
                // 是空，加载全部角色
                for (let i = 0; i < data.length; i++) {
                    dataItems.push(data[i]);
                }
            } else {
                // 根据选择中的数据码加载角色
                let catItem: VoiceRole | undefined = undefined;
                catItem = voiceRoleList.find(x => x.name == api_role_id);

                // 如果找到了对应的角色
                if (catItem != undefined) {
                    api_role_id = catItem.id.toString();
                    for (let i = 0; i < data.length; i++) {
                        if (catItem != undefined) {
                            tempList = data[i].api_role_ids.split(",");
                            if (tempList.includes(api_role_id)) {
                                dataItems.push(data[i]);
                            }
                        }
                    }
                }
            }

            // 确保每个 VoiceActor 对象都有 api_cat_id_names 数组和api_style_id_names 数组
            dataItems.forEach(item => {
                if (!item.api_cat_id_names) {
                    item.api_cat_id_names = [];
                }
                if (!item.api_style_id_names) {
                    item.api_style_id_names = [];
                }
            });

            // 处理语音分类列表，将 id 取到 name
            dataItems.forEach(item => {
                // 遍历 api_cat_ids
                const tempList = item.api_cat_ids.split(',');
                tempList.forEach(id => {
                    const catItem = voiceCatList.find(x => x.id.toString() == id);
                    if (catItem) {
                        item.api_cat_id_names.push(catItem.name);
                    }
                });
                // 遍历 api_style_ids
                const tempStyleList = item.api_style_ids.split(',');
                tempStyleList.forEach(id => {
                    const catItem = voiceStyleList.find(x => x.id.toString() == id);
                    if (catItem) {
                        item.api_style_id_names.push(catItem.name);
                    }
                });
            });

            // 找到的角色列表
            numbers.value = dataItems;
            // 找到的数据条数
            rowCount.value = numbers.value.length;
        })
        .catch(error => {
            // 处理错误
            console.log(error)
        });
}

// 根据情感加载配音角色列表
/**
 * 根据风格 ID 加载语音列表
 * @param api_style_id - 风格 ID，用于筛选语音角色如果为空或未定义，则加载所有角色
 */
function loadVoiceListForStyle(api_style_id: string): void {
    // 发起 HTTP GET 请求以获取语音数据
    axios.get(baseUrl + '/api/tts/tts/getVoice', {
        headers: {
            'Content-Type': 'application/json',
        }
    })
        .then(response => {
            // 处理响应数据
            const data = response.data as VoiceActor[];
            dataItems = [];
            let tempList: string[] = [];

            // 检查 api_style_id 是否为空或未定义
            if (api_style_id == "" || api_style_id == undefined) {
                // 是空，加载全部角色
                for (let i = 0; i < data.length; i++) {
                    dataItems.push(data[i]);
                }
            } else {
                // 根据选择中的数据码加载角色
                let catItem: IVoiceTag | undefined = undefined;
                catItem = voiceStyleList.find(x => x.name == api_style_id);

                // 如果找到了对应的风格
                if (catItem != undefined) {
                    api_style_id = catItem.id.toString();
                    for (let i = 0; i < data.length; i++) {
                        if (catItem != undefined) {
                            tempList = data[i].api_style_ids.split(",");
                            if (tempList.includes(api_style_id)) {
                                dataItems.push(data[i]);
                            }
                        }
                    }
                }
            }

            // 确保每个 VoiceActor 对象都有 api_cat_id_names 数组和api_style_id_names 数组
            dataItems.forEach(item => {
                if (!item.api_cat_id_names) {
                    item.api_cat_id_names = [];
                }
                if (!item.api_style_id_names) {
                    item.api_style_id_names = [];
                }
            });

            // 处理语音分类列表，将 id 取到 name
            dataItems.forEach(item => {
                // 遍历 api_cat_ids
                const tempList = item.api_cat_ids.split(',');
                tempList.forEach(id => {
                    const catItem = voiceCatList.find(x => x.id.toString() == id);
                    if (catItem) {
                        item.api_cat_id_names.push(catItem.name);
                    }
                });
                // 遍历 api_style_ids
                const tempStyleList = item.api_style_ids.split(',');
                tempStyleList.forEach(id => {
                    const catItem = voiceStyleList.find(x => x.id.toString() == id);
                    if (catItem) {
                        item.api_style_id_names.push(catItem.name);
                    }
                });
            });

            // 找到的角色列表
            numbers.value = dataItems;
            // 找到的数据条数
            rowCount.value = numbers.value.length;
        })
        .catch(error => {
            // 处理错误
            console.log(error)
        });
}

// 根据Tag加载配音角色列表
/**
 * 根据标签ID加载语音列表
 * 此函数通过调用API来获取与特定标签ID相关的语音演员列表如果标签ID为空或未定义，则加载所有语音演员
 * @param {string} api_tag_id - 标签ID，用于过滤语音演员列表
 */
function loadVoiceListForTag(api_tag_id: string): void {
    // 发起GET请求以获取语音数据
    axios.get(baseUrl + '/api/tts/tts/getVoice', {
        headers: {
            'Content-Type': 'application/json',
        }
    })
        .then(response => {
            // 处理响应数据
            const data = response.data as VoiceActor[];
            dataItems = [];
            let tempList: string[] = [];

            // 检查api_tag_id是否为空或未定义
            if (api_tag_id == "" || api_tag_id == undefined) {
                // 是空，加载全部角色
                for (let i = 0; i < data.length; i++) {
                    dataItems.push(data[i]);
                }
            } else {
                // 根据选择中的数据码加载角色
                let catItem: IVoiceTag | undefined = undefined;
                catItem = voiceTagList.find(x => x.name == api_tag_id);

                // 如果找到了对应的标签项
                if (catItem != undefined) {
                    api_tag_id = catItem.id.toString();
                    for (let i = 0; i < data.length; i++) {
                        if (catItem != undefined) {
                            tempList = data[i].api_tag_ids.split(",");
                            if (tempList.includes(api_tag_id)) {
                                dataItems.push(data[i]);
                            }
                        }
                    }
                }
            }

            // 确保每个 VoiceActor 对象都有 api_cat_id_names 数组和api_style_id_names 数组
            dataItems.forEach(item => {
                if (!item.api_cat_id_names) {
                    item.api_cat_id_names = [];
                }
                if (!item.api_style_id_names) {
                    item.api_style_id_names = [];
                }
            });

            // 处理语音分类列表，将 id 取到 name
            dataItems.forEach(item => {
                // 遍历 api_cat_ids
                const tempList = item.api_cat_ids.split(',');
                tempList.forEach(id => {
                    const catItem = voiceCatList.find(x => x.id.toString() == id);
                    if (catItem) {
                        item.api_cat_id_names.push(catItem.name);
                    }
                });
                // 遍历 api_style_ids
                const tempStyleList = item.api_style_ids.split(',');
                tempStyleList.forEach(id => {
                    const catItem = voiceStyleList.find(x => x.id.toString() == id);
                    if (catItem) {
                        item.api_style_id_names.push(catItem.name);
                    }
                });
            });

            // 找到的角色列表
            numbers.value = dataItems;
            // 找到的数据条数
            rowCount.value = numbers.value.length;
        })
        .catch(error => {
            // 处理错误
            console.log(error)
        });
}

/**
 * 根据配音角色名称加载配音角色列表
 * @param {string} displayName - 配音角色的显示名称，如果为空或未定义则加载所有角色
 */
function loadVoiceListForVoiceActor(displayName: string): void {
    // 发起 HTTP GET 请求以获取配音角色数据
    axios.get(baseUrl + '/api/tts/tts/getVoice', {
        headers: {
            'Content-Type': 'application/json',
        }
    })
        .then(response => {
            // 处理响应数据
            const data = response.data as VoiceActor[];
            dataItems = [];

            // 检查 displayName 是否为空或未定义，以决定加载全部角色还是特定角色
            if (displayName == "" || displayName == undefined) {
                // 加载全部角色
                for (let i = 0; i < data.length; i++) {
                    dataItems.push(data[i]);
                }
            } else {
                // 根据选择中的数据码加载角色
                for (let i = 0; i < data.length; i++) {
                    if (data[i].DisplayName == displayName) {
                        dataItems.push(data[i]);
                    }
                }
            }

            // 确保每个 VoiceActor 对象都有 api_cat_id_names 数组和 api_style_id_names 数组
            dataItems.forEach(item => {
                if (!item.api_cat_id_names) {
                    item.api_cat_id_names = [];
                }
                if (!item.api_style_id_names) {
                    item.api_style_id_names = [];
                }
            });

            // 处理语音分类列表，将 id 转换为 name
            dataItems.forEach(item => {
                // 遍历 api_cat_ids
                const tempList = item.api_cat_ids.split(',');
                tempList.forEach(id => {
                    const catItem = voiceCatList.find(x => x.id.toString() == id);
                    if (catItem) {
                        item.api_cat_id_names.push(catItem.name);
                    }
                });

                // 遍历 api_style_ids
                const tempStyleList = item.api_style_ids.split(',');
                tempStyleList.forEach(id => {
                    const catItem = voiceStyleList.find(x => x.id.toString() == id);
                    if (catItem) {
                        item.api_style_id_names.push(catItem.name);
                    }
                });
            });

            // 更新找到的角色列表
            numbers.value = dataItems;

            // 更新找到的数据条数
            rowCount.value = numbers.value.length;
        })
        .catch(error => {
            // 处理请求错误
            console.error('请求失败:', error.message);

            // 可以在这里添加更多的错误处理逻辑，例如显示错误提示给用户
        });
}

// 加载语音分类列表
function loadVoiceCatList(): void {
    // 发起获取语音分类的HTTP请求
    axios.get(baseUrl + '/api/tts/tts/getVoiceCat', {
        headers: {
            'Content-Type': 'application/json',
        }
    })
        .then(response => {
            // 将获取到的语音分类列表赋值给voiceCatList
            voiceCatList = response.data as IVoiceCat[];

            // 清空领域列表
            while (lingYuItems.value.length) {
                lingYuItems.value.pop();
            }
            // 添加领域列表
            for (let i = 0; i < voiceCatList.length; i++) {
                lingYuItems.value.push(voiceCatList[i].name);
            }
        })
        .catch(error => {
            // 处理错误
            console.log(error)
        });
}

// 加载语音角色列表
function loadVoiceRoleList(): void {
    // 发起获取语音角色列表的HTTP请求
    axios.get(baseUrl + '/api/tts/tts/getVoiceRole', {
        headers: {
            'Content-Type': 'application/json',
        }
    })
        .then(response => {
            // 将响应数据转换为IVoiceRole数组类型并赋值给voiceRoleList
            voiceRoleList = response.data as IVoiceRole[];

            // 清空列表
            while (roleItems.value.length) {
                roleItems.value.pop();
            }
            // 遍历voiceRoleList，将每个语音角色的名称添加到roleItems.value列表中
            for (let i = 0; i < voiceRoleList.length; i++) {
                roleItems.value.push(voiceRoleList[i].name);
            }
        })
        .catch(error => {
            // 处理错误
            console.log(error)
        });
}

// 加载语音情绪列表
function loadVoiceStyleList(): void {
    let voiceStyle: VoiceStyle | undefined = undefined;
    // 发起获取语音情绪列表的API请求
    axios.get(baseUrl + '/api/tts/tts/getVoiceStyle', {
        headers: {
            'Content-Type': 'application/json',
        }
    })
        .then(response => {
            // 将响应数据转换为IVoiceStyle数组类型
            voiceStyleList = response.data as IVoiceStyle[];

            // 清空列表
            while (styleItems.value.length) {
                styleItems.value.pop();
            }
            // 遍历响应数据，添加语音情绪名称到styleItems列表中
            for (let i = 0; i < voiceStyleList.length; i++) {
                voiceStyle = voiceStyleList[i];
                styleItems.value.push(voiceStyle.name);
            }
        })
        .catch(error => {
            // 处理错误
            console.log(error)
        });
}

// 加载语音Tag列表
function loadVoiceTagList(): void {

    axios.get(baseUrl + '/api/tts/tts/getVoiceTag', {
        headers: {
            'Content-Type': 'application/json',
        }
    })
        .then(response => {
            voiceTagList = response.data as IVoiceTag[];

            // 清空列表
            while (tagItems.value.length) {
                tagItems.value.pop();
            }
            //添加列表
            for (let i = 0; i < voiceTagList.length; i++) {
                tagItems.value.push(voiceTagList[i].name);
            }
        })
        .catch(error => {
            // 处理错误
            console.log(error)
        });
}

// 搜索框选择事件方法
function voiceActorSearch() {
    loadVoiceListForVoiceActor(searchText.value);
}

// 用TA配音按钮
function useTa(item: VoiceActor): void {
    router.push({ name: "ProductionPage", params: { voiceActorId: item.id } })
}

// 我要购买TA
function buyTa(item: VoiceActor): void {
    router.push({ path: '/Purchasembpage' });
}

//  显示对话框
function openDialog(item: VoiceActor) {
    //显示对话框
    dialogVisible.value = true

    //选中的角色
    currentItem.value = item;

    //更新文本
    noticeText.value = '您尚未拥有「' + item.DisplayName + '」声音，该声音为SVIP可用，请先成为超级会员哦~';

    //隐藏当前卡片
    currentItem.value.isShown = false;

    console.log('显示对话框', item);
}

// 当鼠标进入元素时显示卡片，并定位到鼠标位置
function enter(item: VoiceActor, event: any) {
    // 设置当前项为可见，并记录为当前选中项
    item.isShown = true;
    currentItem.value = item;
    console.log('进入当前元素', currentItem.value.DisplayName, currentItem.value.isShown);
    // 获取需要显示的容器
    const container = showCardRef.value;

    if (container && container.style) {
        // 获取容器的宽度和高度
        let containerWidth = container.offsetWidth;
        let containerHeight = container.offsetHeight;

        let rect = event.target.getBoundingClientRect();
        let x = rect.left;
        let y = rect.top;
        let width = rect.width;
        let height = rect.height;

        // 计算新的 left 和 top 值，使 event 元素位于 container 的正中间
        const left = x - 50;
        const top = y - 50;

        // 设置容器的样式
        container.style.display = 'block'; // 显示容器
        container.style.position = 'fixed';
        container.style.left = `${left}px`;
        container.style.top = `${top}px`;
        container.style.zIndex = '9999';
        container.style.pointerEvents = 'auto'; // 允许点击事件穿透
    }

}

// 当鼠标移出元素时隐藏卡片
function leave(item: VoiceActor, event: any) {
    item.isShown = false;
    currentItem.value.isShown = false;
}

// 当鼠标进入当前元素时显示卡片
function enterCurrentItem(item: VoiceActor, event: any) {
    // 设置当前项为可见，并记录为当前选中项
    item.isShown = true;
    currentItem.value.isShown = true;
}

// 当鼠标移出当前元素时隐藏卡片
function leaveCurrentItem(item: VoiceActor, event: any) {
    item.isShown = false;
    currentItem.value.isShown = false;
}

/**
 * 试听语音
 * 当用户点击试听语音按钮时调用此函数
 * 如果当前文本为空，则使用默认文本，并根据所选的情感样式播放语音
 * @param {string} style - 用户选择的情感样式
 */
function handleVoiceStyleClick(style: string) {
    // 检查当前文本是否为空，如果为空则赋予默认值
    if (text.value == '' || text.value == null || text.value == undefined) {
        text.value = '中国有句古话，叫做识时务者为俊杰。没想到眼下的各种餐具，都堵不住阁下的嘴。你我都是聪明人，再不闭嘴好好吃饭的话，难免会遭受一些皮肉之苦。';
    }

    // 由中文转英文情感名称
    // 遍历语音样式列表，将中文情感名称转换为英文情感名称
    for (let i = 0; i < voiceStyleList.length; i++) {
        if (voiceStyleList[i].name == style) {
            style = voiceStyleList[i].en_name;
            break;
        }
    }

    // 调用音频播放函数，传入英文情感名称
    audioPlay(style);
}

/**
 * 播放音频函数
 * @param item VoiceActor类型的项，表示语音演员的信息
 */
function audioPlay(style: string): void {
    // 初始化音频URL
    let audioUrl: string = "";
    // 创建ISpeech类型的speechArgs对象
    let speechArgs: ISpeech = new Speech();

    // 设置语音合成参数
    speechArgs.text = text.value; // 设置合成文本
    speechArgs.voiceName = currentItem.value.ShortName; // 设置发音人名称
    speechArgs.rate = "0.95"; // 设置语速
    speechArgs.volume = '+10.00%'; // 设置音量
    speechArgs.pitch = "0%"; // 设置音调
    speechArgs.style = style;  // 设置讲话风格
    speechArgs.role = ''; // 设置讲话角色扮演
    speechArgs.styleDegree = currentItem.value.styleDegree.toString();  // 设置讲话风格的强度
    speechArgs.breakTime = '250';  // 设置停顿时间

    // 打印speechArgs对象以供调试
    console.log("speechArgs", speechArgs);

    // 调用语音合成方法
    textToSpeechBlob(speechArgs).then(result => {
        if (result) {
            // 如果合成成功，更新音频URL并开始播放
            audioUrl = result;
            audioSrc.value = audioUrl;
            // 开始加载并播放音频
            loadPlayAudio();
        }
    }).catch(error => {
        // 错误处理
    });
}

// 加载并播放音频
const loadPlayAudio = () => {
    if (audioPlayer.value) {
        // 确保音频已加载
        audioPlayer.value.load(); // 尝试加载音频

        // 监听 canplay 事件，确保音频加载完成后播放
        audioPlayer.value.addEventListener('canplay', () => {
            audioPlayer.value.play().catch(error => {
                console.error('语音播放出错:', error);
            });
        }
        );
    }
};

//绑定到DOM后执行的代码
onMounted(() => {

    //加载语音分类列表
    loadVoiceCatList();

    //加载语音角色列表
    loadVoiceRoleList();

    //加载语音情绪列表
    loadVoiceStyleList();

    //加载语音Tag列表
    loadVoiceTagList();

    //取到配音角色列表
    loadVoiceList();


})


</script>

<style scoped>
.find-container {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.grid-content {
    width: 60%;

}

.inline-input {
    width: 100%;
}

.el-text {
    margin-right: 10px;
}

.el-input {
    width: 100%;
}

.category-container {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0;
    margin: 0;
    width: 100%;
    /* 每个组件之间的间距 */
}

.rows-container {
    display: flex;
    align-items: center;
    justify-content: left;
    width: 100%;
    padding-left: 10px;
}

.text-container {
    display: flex;
    justify-content: left;
    text-align: left;
}

/* categorysearch 组件样式 */
.category-search {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    /* 顶部对齐 */
    justify-content: center;
    padding: 0;

}

/* 确保 categorysearch 内部的内容按行显示 */
.category-search>* {
    display: inline-block;
}

.row-bg {
    /* background-color: #f5f7fa; */
    padding: 0px;
    width: 100%;
    height: 100%;
}

.item-container {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
    height: auto;
    /* background-color: #fff;
    border: 1px solid #ddd; */
    border-radius: 4px;
    margin-bottom: 10px;
    min-width: 200px;
    /*最小宽度200px,就是一个角色图片的显示的宽度*/
}

.el-text {
    text-align: center;
}

.el-row {
    width: 100%;
    height: auto;
}

.el-col {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* 配音角色 */
.role-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 240px;
    height: 296px;

    /* border-radius: 8px;
    background-color: #f8f7fa;
    border: 1px solid #ddd; */
    /* 边框 */
}

/* 配音角色 */
.role-container2 {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 340px;
    height: 396px;

    /* border-radius: 8px;
    background-color: #f8f7fa;
    border: 1px solid #ddd; */
    /* 边框 */
}

/* 头部图片 */
.image-content {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    height: 20px;
    margin-top: 8px;
}

/* 左边图片 */
.image-left {
    width: 42px;
    height: 20px;
    margin-left: 8px;
    border-radius: 4px;
    text-align: left;
    border: 0;
}

/* 右边图片 */
.image-right {
    width: 35px;
    height: 20px;
    margin-left: 8px;
    border-radius: 4px;
    text-align: left;
    border: 0;
}

/* 头像 */
.avatar-container {
    margin-top: 8px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: auto;
    width: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* 头像 */
.avatar-container2 {
    margin-top: 8px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: auto;
    width: 300px;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* 名字*/
.name-container {
    display: flex;
    flex-direction: row;
    justify-items: flex-start;
    justify-content: flex-start;
    align-items: center;
    margin-top: 21px;
    margin-left: 15px;
    width: 200px;
}

/* 情感系列名称*/
.tag-container {
    display: flex;
    margin-left: 15px;
    margin-top: 8px;
    margin-bottom: 15px;
    flex-wrap: wrap;
    overflow: hidden;
    max-width: 100%;
}



/* 对话框样式 */
.outer-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 20px;
}

.row-1 {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;

}

.col-1,
.col-2,
.col-3 {
    flex: 1;
}

.col-2 {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
}

.displayname {
    display: flex;
    margin-bottom: 10px;
    gap: 5px;
}

.tags {
    display: flex;
    gap: 5px;
}

.row-2 {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
}

.row-3 {
    display: flex;
    justify-content: center;
}

.row-4 {
    display: flex;
    align-items: center;
    gap: 10px;

}

.row-4 .el-input {
    flex: 1;
}

.row-4 .el-button {
    float: right;
}

.hidden-audio {
    display: none;
    /* 隐藏音频元素 */
}
</style>